<script>
  /** @type {ReadonlyArray<string>} */
  export let selectedIds = [];

  /** Specify the label text */
  export let labelText = "";

  import { setContext } from "svelte";
  import { writable } from "svelte/store";

  /**
   * @type {import("svelte/store").Writable<ReadonlyArray<string>>}
   */
  const currentIds = writable([]);

  /**
   * @type {(data: { id: string }) => void}
   */
  const addOption = ({ id }) => {
    if (!selectedIds.includes(id)) {
      selectedIds = [...selectedIds, id];
    }
  };

  /**
   * @type {(data: { id: string }) => void}
   */
  const toggleOption = ({ id }) => {
    if (selectedIds.includes(id)) {
      selectedIds = selectedIds.filter((_) => _ !== id);
    } else {
      selectedIds = [...selectedIds, id];
    }
  };

  setContext("ContextMenuGroup", {
    currentIds,
    addOption,
    toggleOption,
  });

  $: currentIds.set(selectedIds);
</script>

<li role="none">
  <ul role="group" aria-label={labelText}>
    <slot />
  </ul>
</li>
